import 'package:flutter/material.dart';
import './ticaiitem.dart';

class Listitem extends StatelessWidget {
  final Map<String, dynamic> topic;
  final bool shifouheiye; // 是否处于暗黑模式
  final int index; // 添加 index 参数

  Listitem({required this.topic, required this.shifouheiye, required this.index});

  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽度和高度，用于实现响应式设计
    double screenWidth = MediaQuery.of(context).size.width;
    double neibianju = screenWidth * 0.02; // 响应式内边距
    double zitidaxiao = screenWidth * 0.03; // 响应式排名字体大小

    return Container(
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: shifouheiye ? Color(0xFF404040) : Color(0xFFE6E6E6), // 底部边框
          ),
        ),
      ),
      child: Stack(
        children: [
          // 使用 Flex 和 Expanded 代替 Column 和 Row，灵活控制布局
          Flex(
            direction: Axis.vertical, // 垂直方向布局
            children: [
              Container(
                margin: EdgeInsets.only(
                    top: neibianju,
                    bottom: 0,
                    left: neibianju,
                    right: neibianju),
                child: Flex(
                  direction: Axis.horizontal, // 水平方向布局
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(
                          horizontal: (topic['rank'] ?? 0) <= 3 ? 0 : 2,
                          vertical: (topic['rank'] ?? 0) <= 3 ? 0 : 1),
                      child: _paiming(index, zitidaxiao),
                    ),
                    SizedBox(width: 5),
                    Expanded(
                      child: Flex(
                        direction: Axis.horizontal,
                        children: [
                          Expanded(
                            child: RichText(
                              text: TextSpan(
                                children: [ 
                                  TextSpan(
                                    text: topic['name'] ?? '',
                                    style: TextStyle(
                                      color: shifouheiye ? Colors.white : Colors.black,
                                      fontSize: 16,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  ),
                                  TextSpan(
                                    text: '  ${topic['percent'] ?? ''}',
                                    style: TextStyle(
                                      color: (topic['percent'] ?? '').toString().startsWith('-')
                                          ? Color(0xFF1CAA3C)
                                          : Color(0xFFF2233B),
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  if (topic['icon'] != null && topic['icon'].isNotEmpty)
                                    WidgetSpan(
                                      child: Padding(
                                        padding: EdgeInsets.only(left: 10),
                                        child: Image.network(
                                          topic['icon'], // 显示在线图标
                                          width: 45,
                                          height: 23,
                                        ),
                                      ),
                                    ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        border: topic['limit_up_num'] == null || topic['limit_up_num'].isEmpty
                            ? null // 如果为空，则不显示边框
                            : Border.all(color: Colors.red), // 否则显示红色边框
                        borderRadius: BorderRadius.circular(4),
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 5, vertical: 0),
                      child: topic['limit_up_num'] == null || topic['limit_up_num'].isEmpty
                          ? Opacity(
                        opacity: 0.0, // 设置透明度
                        child: Container(
                          width: 30,
                          height: 15,
                        ),
                      )
                          : Center(
                        child: Text(
                          '${topic['limit_up_num']}',
                          style: TextStyle(
                            color: Colors.red,
                            fontSize: 10,
                          ),
                          textAlign: TextAlign.center, // 文本居中
                        ),
                      ),
                    ),
                    Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey),
                  ],
                ),
              ),
              SizedBox(height: 9.1),
              Container(
                margin: EdgeInsets.only(bottom: 15, left: 5, right: 10),
                child: Flex(
                  direction: Axis.horizontal, // 水平方向布局
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    _shangzhang(context, topic, zitidaxiao),
                    ticaiitem(
                      stockName: topic['list'] != null && topic['list'].isNotEmpty
                          ? topic['list'][0]['name']
                          : '',
                      stockRate: topic['list'] != null && topic['list'].isNotEmpty
                          ? topic['list'][0]['percent']
                          : '',
                      isDarkMode: shifouheiye,
                    ),
                    SizedBox(width: 20),
                    ticaiitem(
                      stockName: topic['list'] != null && topic['list'].length > 1
                          ? topic['list'][1]['name']
                          : '',
                      stockRate: topic['list'] != null && topic['list'].length > 1
                          ? topic['list'][1]['percent']
                          : '',
                      isDarkMode: shifouheiye,
                    ),
                  ],
                ),
              ),
            ],
          ),
          if (topic['is_new'] == 1)
            Positioned(
              top: 0,
              right: 0,
              child: Image.asset(
                'donggudiicon/icon/xin.png', // 角标图片路径
                width: 25,
                height: 25,
              ),
            ),
        ],
      ),
    );
  }


  Widget _paiming(int index, double responsiveRankFontSize) {
    switch (index) {
      case 0:
        return Image.asset(
          'donggudiicon/icon/diyi.png', // 下标为0时显示01图标
          width: 20,
          height: 20,
        );
      case 1:
        return Image.asset(
          'donggudiicon/icon/dier.png', // 下标为1时显示02图标
          width: 20,
          height: 20,
        );
      case 2:
        return Image.asset(
          'donggudiicon/icon/disan.png', // 下标为2时显示03图标
          width: 20,
          height: 20,
        );
      default:
        return Padding(
          padding: EdgeInsets.only(left: 6,right: 6), // 添加左边距
          child: Text(
            '${index + 1}', // 其他下标显示对应的文本
            style: TextStyle(
              color: Colors.grey,
              fontWeight: FontWeight.bold,
              fontSize: 14,
            ),
          ),
        );

    }

  }

  Widget _shangzhang(BuildContext context, Map<String, dynamic> topic, double responsiveRankFontSize) {
    if ((topic['rank_num'] ?? 0) <= 0) {
      return SizedBox(
        width: 30,
        height: 5,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(4),
          ),
        ),
      );
    }

    return Container(
      decoration: BoxDecoration(
        color: Colors.red[50]!.withOpacity(0.5),
        borderRadius: BorderRadius.circular(5),
      ),
      padding: EdgeInsets.symmetric(
        horizontal: 5,
        vertical: 1,
      ),
      margin: EdgeInsets.only(right: 3),
      child: Row(
        children: [
          Icon(Icons.arrow_upward, color: Colors.red, size: 10),
          Text(
            ' ${topic['rank_num'] ?? ''}',
            style: TextStyle(color: Colors.red, fontSize: 10),
          ),
        ],
      ),
    );
  }
}
